<template>
	<view class="e-swipe-action-item" >
		<view class="e-swipe-action-item__right">
			<slot name="button">
				<view v-for="(item,index) in props.options" :key="index" class="e-swipe-action-item__right__button"
					:ref="`e-swipe-action-item__right__button-${index}`" :style="[{
						alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
					}]" @tap="buttonClickHandler(index)">
					<view class="e-swipe-action-item__right__button__wrapper" :style="[{
							backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
							borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
							padding: item.style && item.style.borderRadius ? '0' : '0 15px',
						}, item.style]">
						<e-icon v-if="item.icon" :name="item.icon"
							:color="item.style && item.style.color ? item.style.color : '#ffffff'"
							:size="item.iconSize ? addUnit(item.iconSize) : item.style && item.style.fontSize ? getPx(item.style.fontSize) * 1.2 : 17"
							:customStyle="{
								marginRight: item.text ? '2px' : 0
							}"></e-icon>
						<text v-if="item.text" class="e-swipe-action-item__right__button__wrapper__text e-line-1"
							:style="[{
								color: item.style && item.style.color ? item.style.color : '#ffffff',
								fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
								lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
							}]">{{ item.text }}</text>
					</view>
				</view>
			</slot>
		</view>
		<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
		<view class="e-swipe-action-item__content" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
			@touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
			:change:size="wxs.sizeChange">
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<view class="e-swipe-action-item__content" ref="swipeActionItemContentRef" @panstart="onTouchstart"
				@tap="clickHandler">
				<!-- #endif -->
				<slot />
			</view>
		</view>
</template>
<script lang="ts">
	import { defineComponent } from 'vue'
	import mpMixin from '../../libs/mixin/mpMixin'
	/**
	 * SwipeActionItem 滑动单元格子组件
	 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
	 * @tutorial https://www.uviewui.com/components/swipeAction.html
	 * @property {Boolean}			show			控制打开或者关闭（默认 false ）
	 * @property {String | Number}	index			标识符，如果是v-for，可用index索引
	 * @property {Boolean}			disabled		是否禁用（默认 false ）
	 * @property {Boolean}			autoClose		是否自动关闭其他swipe按钮组（默认 true ）
	 * @property {Number}			threshold		滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
	 * @property {Array}			options			右侧按钮内容
	 * @property {String | Number}	duration		动画过渡时间，单位ms（默认 350 ）
	 * @event {Function(index)}	open	组件打开时触发
	 * @event {Function(index)}	close	组件关闭时触发
	 * @example	<e-swipe-action><e-swipe-action-item :options="options1" ></e-swipe-action-item></e-swipe-action>
	 */
	export default defineComponent({
		name: 'e-swipe-action-item',
		mixins: [mpMixin],
		methods:{
			// uniapp wxs的callMethod不支持setup写法，改为自定义callMethod
			callMethod ([e,params]:[string,any]) {
				this._.exposed[e]?.(params)
			}
		}
	})
</script>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
<script src="./index.wxs" module="wxs" lang="wxs"></script>
<!-- #endif -->
<script lang="ts" setup>
	import { useHooks } from './nvue';
	import {
		watch,
		computed,
		toRefs,
		provide,
		inject,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	import {
		swipeActionItemProps,
		swipeActionItemEmits
	} from './props';
	import {
		swipeActionContextKey,
		swipeActionItemContextKey
	} from '../../libs/tokens'
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import {
		sleep,
		getRect
	} from '../../libs/utils'
	import {
		throwError,
		addUnit,
		getPx
	} from '../../libs/utils/_utils'
	import componentsProps from "../../libs/config/componentsProps";
	import type {DefaultProps} from "../../libs/config/componentsProps";



	const { swipeActionItem: swipeActionItemDefaultProps } = toRefs(componentsProps);

	const _props = defineProps(swipeActionItemProps)
	const props = useDefaultProps<DefaultProps['swipeActionItem']>(_props, swipeActionItemDefaultProps);
	const emit = defineEmits(swipeActionItemEmits)

	const swipeActionContext = inject(swipeActionContextKey)
	if (!swipeActionContext) throwError('ESwipeActionItem', 'e-swipe-action-item需要结合e-swipe-action组件使用')

	const {
		ctx,
		status,
		size,
		swipeActionItemContentRef,
		context,
		closeHandler,
		closeOther,
		setState,
		// #ifdef APP-NVUE
		clickHandler,
		onTouchstart,
		nvueInit
		// #endif
	} = useHooks(props, swipeActionContext)





	const init = () => {
		// #ifndef APP-NVUE
		sleep().then(() => {
			queryRect()
		})
		// #endif
	}

	// #ifndef APP-NVUE
	// 查询节点
	const queryRect = () => {
		getRect(ctx, '.e-swipe-action-item__right__button',true).then(buttons => {
			size.value = {
				buttons,
				show: props.value.show,
				disabled: props.value.disabled,
				threshold: props.value.threshold,
				duration: props.value.duration
			}
		})
	}
	// #endif
	// 按钮被点击
	const buttonClickHandler = (index : number) => {
		emit('click', {
			index,
			name: props.value.name
		})
	}

	const wxsInit = computed(() => {
		return [props.value.disabled, props.value.autoClose, props.value.threshold, props.value.options, props.value.duration]
	})
	// 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
	watch(wxsInit, () => {
		queryRect()
	})


	onMounted(() => {
		init()
		// #ifdef APP-NVUE
		nvueInit()
		// #endif
		if (swipeActionContext) {
			swipeActionContext.addField(context)
		}
	})

	onBeforeUnmount(() => {
		if (swipeActionContext) {
			swipeActionContext.removeField(context)
		}

	})

	provide(swipeActionItemContextKey, context)
	
	defineExpose({
		closeHandler,
		closeOther,
		setState,
	})
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/swipe-action-item.scss";
</style>